<template>
  <div class="editormodify">
    <div ref="toolbarModify" class="toolbar"></div>
    <div ref="editorModify" class="text_one"></div>
  </div>
</template>
<script src="https://cdn.bootcss.com/wangEditor/3.1.0/wangEditor.js"></script>
<script>
import E from "wangeditor";
import OSS from "ali-oss";
export default {
  name: "editormodify",
  data() {
    return {
      editorContentModify: "",
      imageUrlModify: "",
      editor: {},
      loading: false
    };
  },
  props: {
    catchData: Function,
    todosc: String
  },
  methods: {
    seteditorModify() {
      this.editor.config.uploadImgShowBase64 = false; // base 64 存储图片
      this.editor.config.uploadImgServer = ""; // 配置服务器端地址
      this.editor.config.uploadImgHeaders = {}; // 自定义 header
      this.editor.config.uploadFileName = ""; // 后端接受上传文件的参数名
      // this.editor.config.uploadImgMaxSize = 2 * 1024 * 1024 // 将图片大小限制为 2M
      this.editor.config.uploadImgMaxLength = 6; // 限制一次最多上传 3 张图片
      this.editor.config.uploadImgTimeout = 3 * 60 * 1000; // 设置超时时间
      this.editor.config.showLinkImg = false; //隐藏上传网络图片
      //自定义图片上传
      (this.editor.config.customUploadImg = async (files, insert) => {
        var _this = this;
        var oss_region = new OSS({
          region: "oss-cn-hangzhou",
          accessKeyId: this.util.decrypt(process.env.AES_OSS_ID),
          accessKeySecret: this.util.decrypt(process.env.AES_OSS_SECRET),
          bucket: _this.imageUrlModify
        });
        var c = new Date().getMonth() + parseInt(1);
        if (c >= 10) {
        } else {
          c = "0" + c;
        }
        var path =
          "upload/images/notice/" +
          new Date().getFullYear() +
          c +
          new Date().getDate() +
          "/" +
          new Date().getTime() +
          Math.floor(Math.random() * 10) +
          files[0].name.substring(files[0].name.length - 4);
        //alert(path)
        this.loading = true;
        oss_region
          .multipartUpload(path, files[0], {})
          .then(res => {
            this.$message.success("上传成功");
            if (res.res.requestUrls[0].indexOf("?") != -1) {
              _this.iops = res.res.requestUrls[0].indexOf("?");
              this.editor.cmd.do(
                "insertHTML",
                "<img  style='width:auto;height:auto;' src=" +
                  res.res.requestUrls[0].substring(0, _this.iops) +
                  " " +
                  "/>"
              );
            } else {
              this.editor.cmd.do(
                "insertHTML",
                "<img  style='width:auto;height:auto;' src=" +
                  res.res.requestUrls[0] +
                  " " +
                  "/>"
              );
            }
            //添加图片到编辑框中
          })
          .catch(err => {
            this.loading = false;
            console.log(err);
          });
      }),
        (this.editor.config.uploadImgHooks = {});
      // 配置菜单
      this.editor.config.menus = [
        "head", // 标题
        "bold", // 粗体
        "fontSize", // 字号
        "fontName", // 字体
        "italic", // 斜体
        "underline", // 下划线
        "strikeThrough", // 删除线
        "indent", //缩进
        "foreColor", // 文字颜色
        "backColor", // 背景颜色
        "link", // 插入链接
        "list", // 列表
        "justify", // 对齐方式
        "quote", // 引用
        "emoticon", // 表情
        "image", // 插入图片
        "table", // 表格
        //'video', // 插入视频
        "code", // 插入代码
        "undo", // 撤销
        "redo" // 重复
      ];
      //编辑框内容变化
      this.editor.config.onchange = html => {
        this.editorContentModify = this.editor.txt.html();
        this.catchData(html);
      };
      // 创建富文本编辑器
      this.editor.create();
    }
  },
  watch: {
    todosc(newval, oldval) {
      if (!this.editor) {
        this.editor = new E(this.$refs.toolbarModify, this.$refs.editorModify);
      }

      this.editor.txt.html(newval);
    }
  },
  mounted() {
    this.editor = new E(this.$refs.toolbarModify, this.$refs.editorModify);

    this.seteditorModify();
    if (this.todosc != "") {
      this.editor.txt.html(this.todosc);
    }
  },
  created() {
    if (location.hostname === "localhost") {
      this.imageUrlModify = "dev-hibuilding-new";
    } else if (location.hostname.split(".")[1] === "ihibuilding") {
      this.imageUrlModify = "dev-hibuilding-new";
    } else if (location.hostname.split(".")[1] === "hibuilding") {
      this.imageUrlModify = "hibuilding-new";
    }
  }
};
</script>

<style lang="scss" scoped>
.toolbar {
  border: 1px solid #ccc;
}
.text_one {
  border: 1px solid #cccccc;
  height: 300px;
}
</style>
